<template>
  <div>
    <IDialog :dialogData="dialogData">
      <div> 弹窗内容自定义 </div>
    </IDialog>
    <IButton :buttonData="submitDataBtn" />
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import { useMessage, IButton, IDialog } from 'wb-platform-library'
  import { ButtonOptionsInterFace, DialogDataInterface } from 'wb-platform-library/lib/dist/packages/components/IDialog/src/IDialog'
  const message = useMessage()
  const submitDataBtn = ref<ButtonOptionsInterFace>({
    label: '打开弹框',
    loading: false,
    callback: async () => {
      dialogData.value.show = true
    },
  })
  const dialogData = ref<DialogDataInterface>({
    width: 800, // 弹框宽度
    show: false, // 弹框是否展示
    title: '弹窗示例', // 弹框名字
    onSubmit: () => {
      message.successMsg('点击确定')
      dialogData.value.onCancel && dialogData.value.onCancel()
    },
    onCancel: () => {
      dialogData.value.show = false
    },
  })
</script>
